<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="spring"
	uri="http://www.springframework.org/tags/form"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>包租婆信息修改</title>
<link rel="styleSheet" href="../../css/bootstrap.min.css">
<script type="text/javascript" src="../../js/jquery-3.1.0.min.js"></script>
<style type="text/css">
#updateDiv {
	margin-top: 30px;
}

#updateBt {
	margin-left: 430px;
	margin-top:30px;
	border-color: 
}
    .form-control{
        width: 200px;
    }
    label{
        float: right;
        margin-top: 5px;
    }
    .col-sm-4{
        padding: 0px;
        margin-top: 50px;
        width: 200px;
    }
</style>
</head>
<body style="background-color: transparent;">
	<div id="updateDiv">
		<input type="hidden" id="ladyID" value="${sessionScope.myLandLady.ladyID }">
		<p></p>
		<spring:form id="updateInfo" method="post"
			action="../../updateLandlady.do" commandName="landLady"
			class="form-horizontal" onsubmit="return checkInfo()">
            <div class="row">
                <div class="col-xs-6 col-sm-4">
                    <label>用户名&nbsp;：</label>
                </div>
                <div class="col-xs-6 col-sm-4">
                    <input type="text" readonly="readonly" id="userName"  class="form-control" name="userName">
                </div>
                <div style="width:150px;" class="col-xs-6 col-sm-4">
                   
                </div>
                <div style="width:90px;" class="col-xs-6 col-sm-4">
                    <label>真实姓名：</label>
                </div>
                <div class="col-xs-6 col-sm-4">
                    <input type="text" class="form-control" readonly="readonly" id="ladyName" name="ladyName">
                </div>
                <div class="col-xs-6 col-sm-4">
                    
                </div>
            </div>
            <div class="row">
                <div class="col-xs-6 col-sm-4">
                    <label>&nbsp;&nbsp;&nbsp;密&nbsp;&nbsp;&nbsp;&nbsp;码：</label>
                </div>
                <div class="col-xs-6 col-sm-4">
                    <input type="password" class="form-control" id="userPWD" name="userPWD" onblur="checkPWD()" onfocus="onfocusPWD()">           
                </div>
                <div style="width:150px;" class="col-xs-6 col-sm-4">
                    <label style="float:left;">&nbsp;<spring:errors delimiter="," path="userPWD"></spring:errors><span id="checkPWD"></span></label>
                </div>
                <div style="width:90px;" class="col-xs-6 col-sm-4">
                    <label>确认密码：</label>
                </div>
                <div id="checkpassword" class="col-xs-6 col-sm-4">
                    <input type="password" class="form-control" id="sureUserPWD" name="sureUserPWD" onblur="checkReapet()" onfocus="onfocusReapet()">          
                </div>
                <div class="col-xs-6 col-sm-4">
                    <label style="float:left;"><span id="checkReapet"></span><spring:errors></spring:errors><span id="checkPWD"></span></label>
                </div>
            </div>
             <div class="row">
                <div class="col-xs-6 col-sm-4">
                <label>电话号码：</label>
                 </div>
                <div class="col-xs-6 col-sm-4">
                    <input type="text" id="ladyTel" name="ladyTel" class="form-control" onblur="checkTel()" onfocus="onfocusTel()">
                 </div>
                 <div style="width:150px;" class="col-xs-6 col-sm-4">
                    <label style="float:left;"><spring:errors delimiter="," path="ladyTel"></spring:errors><span id="checkTel"></span></label>
                </div>
                 <div style="width:90px;" class="col-xs-6 col-sm-4">
                    <label>身份证号：</label>
                </div>
                 <div class="col-xs-6 col-sm-4">
                    <input type="text" id="ladyCard" class="form-control" name="ladyCard" readonly="readonly">
                </div>
                 <div class="col-xs-6 col-sm-4">
                    
                </div>
            </div>
            <div class="row">
                <div class="col-xs-6 col-sm-4">
                <label>家庭住址：</label>
                 </div>
                <div class="col-xs-6 col-sm-4">
                    <input type="text" class="form-control" id="ladyAddress" name="ladyAddress" onblur="checkAddress()" onfocus="onfocusAddress()">
                 </div>
                 <div style="width:150px;" class="col-xs-6 col-sm-4">
                    <label style="float:left;"><spring:errors delimiter="," path="ladyAddress"></spring:errors><span id="checkAddress"></span></label>
                </div>
                <div style="width:90px;" class="col-xs-6 col-sm-4">
                    <label>职业描述：</label>
                </div>
                <div class="col-xs-6 col-sm-4">
                    <input type="text" id="ladyDescribe" class="form-control" name="ladyDescribe" onblur="checkDes()" onfocus="onfocusDes()">
                </div>
                <div class="col-xs-6 col-sm-4">
                    <label style="float:left;"><spring:errors delimiter="," path="ladyDescribe"></spring:errors><span id="checkDes"></span></label>
                </div>
            </div>
			<input type="submit" id="updateBt" class="btn btn-primary" value="修改">
		</spring:form>
	</div>
</body>
<script type="text/javascript">
	$(function() {
		init();
	})
	function init() {
		showMessage();
	}
	function showMessage() {
		var id = $("#ladyID").val();
		$.ajax({
			type : "POST",
			url : "../../showlandLady.do",
			data : {
				"id" : id
			},
			success : function(msg) {
				$("#userName").val(msg.user.userName);
				$("#userPWD").val(msg.user.userPWD);
				$("#sureUserPWD").val(msg.user.userPWD);
				$("#ladyTel").val(msg.ladyTel);
				$("#ladyAddress").val(msg.ladyAddress);
				$("#ladyDescribe").val(msg.ladyDescribe);
				$("#ladyName").val(msg.ladyName);
				$("#ladyCard").val(msg.ladyCard);
			}
		});
	}

	function checkInfo() {
		var flag = checkPWD() && checkTel() && checkReapet() && checkAddress()
				&& checkDes();
		return flag;
	}
	function checkPWD() {
		var pwd = $("#userPWD").val();
		var eReg = /^[a-zA-Z0-9]{6,15}$/;
		var PWDMessage = $("#checkPWD");
		if (pwd.length == 0) {
			PWDMessage.html("×不能为空");
			$("#userPWD").css("border-color","red");
			PWDMessage.css("color","red");
			return false;
		} else if (!eReg.test(pwd)) {
			PWDMessage.html("×密码为6-15位数字和字母");
			$("#userPWD").css("border-color","red");
			PWDMessage.css("color","red");
			return false;
		} else {
			$("#userPWD").css("border-color","green");
			PWDMessage.css("color","green");
			PWDMessage.html("√");
			return true;
		}
	}
	function onfocusPWD() {
		var PWDMessage = $("#checkPWD");
		$("#userPWD").css("border-color","");
		PWDMessage.html(" ")

	}
	function checkTel() {
		var telReg = /(1([3][0-9])|(47)|([5][012356789])|([8][02356789])\d{8}$)/;
		var tel = $("#ladyTel").val();
		var telMessage = $("#checkTel");
		if (tel.length == 0) {
			telMessage.html("×电话号码不能为空");
			$("#ladyTel").css("border-color","red");
			telMessage.css("color","red");
			return false;
		} else if (!telReg.test(tel)) {
			telMessage.html("×电话号码格式不对");
			$("#ladyTel").css("border-color","red");
			telMessage.css("color","red");
			return false;
		} else {
			$("#ladyTel").css("border-color","green");
			telMessage.css("color","green");
			telMessage.html("√");
			return true;
		}
	}
	function onfocusTel() {
		var telMessage = $("#checkTel");
		telMessage.html(" ");
		$("#ladyTel").css("border-color","");
	}
	function checkReapet() {
		var fPWD = $("#userPWD").val();
		var sPWD = $("#sureUserPWD").val();
		if (sPWD.length == 0) {
			$("#checkReapet").html("×确认密码不能为空");
			$("#sureUserPWD").css("border-color","red");
			$("#checkReapet").css("color","red");
			return false;
		} else if (fPWD == sPWD) {
			$("#sureUserPWD").css("border-color","green");
			$("#checkReapet").css("color","green");
			$("#checkReapet").html("√");
			return true;
		} else {
			$("#checkReapet").html("×前后密码不同");
			$("#sureUserPWD").css("border-color","red");
			$("#checkReapet").css("color","red");
			return false;
		}
	}
	function onfocusReapet() {
		$("#sureUserPWD").css("border-color","");
		$("#checkReapet").html(" ");
	}
	function checkAddress() {
		var address = $("#ladyAddress").val();
		var addressMessage = $("#checkAddress");
		if (address.length == 0) {
			$("#ladyAddress").css("border-color","red");
			addressMessage.css("color","red");
			addressMessage.html("×住址不能为空")
			return false;
		} else if (address.length<3 || address.length>20) {
			$("#ladyAddress").css("border-color","red");
			addressMessage.css("color","red");
			addressMessage.html("×长度3-20位");
			return false;
		} else {
			$("#ladyAddress").css("border-color","green");
			addressMessage.css("color","green");
			addressMessage.html("√");
			return true;
		}
	}
	function onfocusAddress() {
		var addressMessage = $("#checkAddress");
		$("#ladyAddress").css("border-color","");
		addressMessage.html("")
	}
	function checkDes() {
		var descripe = $("#ladyDescribe").val();
		var desMessage = $("#checkDes");
		if (descripe.length == 0) {
			$("#ladyDescribe").css("border-color","red");
			desMessage.css("color","red");
			desMessage.html("×职业描述不能为空")
			return false;
		} else if (descripe.length<3 || descripe.length>15) {
			$("#ladyDescribe").css("border-color","red");
			desMessage.css("color","red");
			desMessage.html("×职业长度为3-15位");
			return false;
		} else {
			$("#ladyDescribe").css("border-color","green");
			desMessage.css("color","green");
			desMessage.html("√");
			return true;
		}

	}
	function onfocusDes() {
		var desMessage = $("#checkDes");
		$("#ladyDescribe").css("border-color","");
		desMessage.html(" ")
	}
</script>
</html>